<template>
  <div class="index">
    <el-carousel :interval="4000" type="card">
      <el-carousel-item v-for="pic in pics" :key="pic.id">
        <el-image fit="scale-down" :src="pic"></el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="charts">
      <el-check-tag :checked="statusRef.plant" @change="handleInfoChanged($event,'plant')" style="margin-right: 8px">
        植物信息
      </el-check-tag>
      <el-check-tag :checked="statusRef.zombie" @change="handleInfoChanged($event,'zombie')" style="margin-right: 8px">
        僵尸信息
      </el-check-tag>
      <el-check-tag :checked="statusRef.user" @change="handleInfoChanged($event,'user')" style="margin-right: 8px">用户信息
      </el-check-tag>
      <div class="status">
        <x-status ref="chartRef" :dataset="dataset" title="系统信息图"></x-status>
      </div>
    </div>
  </div>
</template>

<script setup>
import XStatus from '../components/x-status.vue';
import { userDetails, plantDetails, zombieDetails } from '../api/chart'

const dataset = reactive([])

const chartRef = ref()

const statusRef = reactive({
  plant: false,
  zombie: false,
  user: false
})


const pics = reactive([
  `https://www.dmoe.cc/random.php?v=${Math.random()}`,
  `https://www.dmoe.cc/random.php?v=${Math.random()}`,
  `https://www.dmoe.cc/random.php?v=${Math.random()}`,
  `https://www.dmoe.cc/random.php?v=${Math.random()}`,
  `https://www.dmoe.cc/random.php?v=${Math.random()}`,
])

const handleInfoChanged = (value, name) => {
  statusRef[name] = value
  updateChart()
}

const updateChart = async () => {
  const res = []
  chartRef.value.isShow = true
  if (statusRef.plant) {
    await plantDetails().then(({ data }) => {
      res.push(
        { value: data.day, name: '白天植物个数' },
        { value: data.night, name: '夜晚植物个数' },
        { value: data.fog, name: '雾天植物个数' },
        { value: data.pool, name: '泳池植物个数' },
        { value: data.roof, name: '屋顶植物个数' },
        { value: data.shop, name: '商店植物个数' },
      )
    })
  }

  if (statusRef.zombie) {
    await zombieDetails().then(({ data }) => {
      res.push({
        value: data, name: '僵尸个数'
      })
    })
  }

  if (statusRef.user) {
    await userDetails().then(({ data }) => {
      console.log('userDetails', data);
      res.push(
        { value: data.adminCount, name: '管理员计数' },
        { value: data.commonCount, name: '普通用户计数' },
        { value: data.manCount, name: '男性用户计数' },
        { value: data.womenCount, name: '女性用户计数' },
        { value: data.totalCount, name: '所有用户计数' },
      )
    })
  }

  console.log(res);
  dataset.splice(0, dataset.length, ...res)
  chartRef.value.drawChart()
  if (!(statusRef.plant || statusRef.zombie || statusRef.user)) {
    chartRef.value.isShow = false
  }
}


</script>

<style lang="scss" scoped>
.status {
  min-height: 250px;
}
</style>